Skip to content

DOC-752 | Graph Visualizer UI #701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Conversation

bluepal-shiva-darapaneni
Copy link

@bluepal-shiva-darapaneni bluepal-shiva-darapaneni commented May 15, 2025

Description

Upstream PRs

  • 3.10:
  • 3.11:
  • 3.12:
  • 3.13:

Copy link
Contributor

Deploy Preview Available Via
https://deploy-preview-701--docs-hugo.netlify.app

Copy link

cla-bot bot commented May 15, 2025

Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: bluepal-shiva-darapaneni.
This is most likely caused by a git client misconfiguration; please make sure to:

  1. check if your git client is configured with an email to sign commits git config --list | grep email
  2. If not, set it up using git config --global user.email email@example.com
  3. Make sure that the git commit email is configured in your GitHub account settings, see https://github.com/settings/emails

This comment was marked as duplicate.

This comment was marked as duplicate.

@Simran-B Simran-B changed the title DOC-752 | A new page is created site/content/3.13 Graphs/graph-visual… DOC-752 | Graph Visualizer UI May 21, 2025
menuTitle: Graph Visualizer
weight: 85
description: >-
Graph Visualizer allows you to visualize the graphs present in the database.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Missing article
  • Too vague, need a good value proposition here
  • Shouldn't end with a period as per the Readme

Graph Visualizer allows you to visualize the graphs present in the database.
---

A **Graph** in ArangoDB is a powerful data structure that models relationships between entities. The **Graph Visualizer** provides an interactive interface to explore these connections, enabling users to traverse edges, inspect vertices, and intuitively understand the underlying data structure.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if we need to explain the concept of a graph in this context


A **Graph** in ArangoDB is a powerful data structure that models relationships between entities. The **Graph Visualizer** provides an interactive interface to explore these connections, enabling users to traverse edges, inspect vertices, and intuitively understand the underlying data structure.

> 💡 **Note:** Graph creation is **not** performed within the Graph Visualizer. Graphs must be created in the **Graphs** section of the application. Once a graph is created there, it will automatically appear in the Graph Visualizer, ready for exploration and visualization.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should use an Admonition, see Readme

Right-click anywhere on the canvas and select **"Create Node"**. A dropdown will appear showing all related document collections. Select the desired collection (vertex type), provide a unique identifier or name, and create the node. The node will then appear in the visualization.

- **Step-1 : Right Click On Graph Area**
{{< image src="../../images/1a-Create_Node.png" >}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use standard Markdown if you want to include images. This Shortcode is only for exceptional cases where custom styling needs to be specified or if the image should have a caption.


> 💡 **Note:** Graph creation is **not** performed within the Graph Visualizer. Graphs must be created in the **Graphs** section of the application. Once a graph is created there, it will automatically appear in the Graph Visualizer, ready for exploration and visualization.

## 1.Data Augmentation
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would generally avoid enumerations in headlines, and especially here where the content has no specific order (time/priority)


While the Graph Visualizer is primarily designed for exploring graph data, you can also create and modify nodes and edges directly from the canvas.

**A.Add New Nodes (Vertices):**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To structure the content, you should use (un)ordered lists if the child content is rather short or sub-headings if it's larger. Enumerations need to be created with markup not free-text.

While the Graph Visualizer is primarily designed for exploring graph data, you can also create and modify nodes and edges directly from the canvas.

**A.Add New Nodes (Vertices):**
Right-click anywhere on the canvas and select **"Create Node"**. A dropdown will appear showing all related document collections. Select the desired collection (vertex type), provide a unique identifier or name, and create the node. The node will then appear in the visualization.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

**A.Add New Nodes (Vertices):**
Right-click anywhere on the canvas and select **"Create Node"**. A dropdown will appear showing all related document collections. Select the desired collection (vertex type), provide a unique identifier or name, and create the node. The node will then appear in the visualization.

- **Step-1 : Right Click On Graph Area**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Use markup for ordered list
  • Should be right-click (hyphen)
  • Is the idea for this to be like a headline? Otherwise, I don't understand the title case


The top-left section of the Graph Visualizer includes powerful search and query tools for interactive exploration.

##### 🔍 Search
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Please don't skip headline levels. Pages should have a sound structure.
  • I'm not sure about the use of emoji

These features allow better spatial understanding of node clusters, hierarchies,
and relationship flows.

---
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why a horizontal ruler here?

This comment was marked as duplicate.

This comment was marked as duplicate.

This comment was marked as duplicate.

and visually understand the data structure.

{{< info >}}
💡 **Note:** Graph creation is **not** performed within the Graph Visualizer. Graphs must be created in the **Graphs** section of the application. Once a graph is created there, it will automatically appear in the Graph Visualizer, ready for exploration and visualization.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Remove the emoji and "Note", how this remark is displayed is better left to the template of the admonition shortcode
  • Unclear what "the application" refers to. Should be more specific, pointing to the current Management interface and then the Graphs section using the 2nd level navigation
  • Use present tense

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Leave enumerations to the content processor, i.e. no handwritten 1, 2, or 1., 2. or A, B in headlines or lists. Use unordered or ordered Markdown lists instead.


Right-click anywhere on the canvas to open the context menu and select **Create Node**. A dropdown appears listing available document collections. Select a collection (vertex type), enter a unique identifier, and create the node. It is then added to the visualization.

##### 1. Open the Graph Interface
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be an ordered list because each step is a short text, and I think it can be more concise like this:

1. In the web interface, navigate to the **Graphs** section.
2. Click the name or row of the desired graph.
3. Right-click the canvas to open the context menu.
4. Click **Create node** and select the collection to create the vertex in.
5. In the dialog that opens, you can do the following:
   - Change the target collection (**Node Type**) 
   - Optionally enter the document key for the vertex (**Node ID**).
7. Click **Create**. The new node appears on the canvas.

The same goes for creating edges, as well as deleting vertices/edges.


### C. Delete Nodes or Edges

Select a node or edge and right-click to access the **"Delete"** option. This action removes the selected element from both the graph and the database.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No quotes as I said before

The core function of the Graph Visualizer is to provide an intuitive canvas for exploring graph structures.

### A. List All Graphs
View and select any graph from the list of connected graphs, including **General Graphs**, **Smart Graphs**, **Satellite Graphs**, **Enterprise Graphs**, and **Knowledge Graphs**.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Except for General Graphs, there is no space between the words, e.g. SmartGraphs. See the README

### C. Dynamic Graph Rendering
In addition to static graphs, you can dynamically render graphs using the **New Query** or **Saved Queries** options. This allows visualizing results from custom AQL queries on demand.
{{< tip >}}
💡 On CLick search bar (Explore) user can able to run the query and see the result on Canvas.And also user can able to save the query for future use.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Grammar needs to be fixed, emoji removed


### A. Add New Nodes

Right-click anywhere on the canvas to open the context menu and select **Create Node**. A dropdown appears listing available document collections. Select a collection (vertex type), enter a unique identifier, and create the node. It is then added to the visualization.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems redundant, why essentially the same description twice?

View and select any graph from the list of connected graphs, including **General Graphs**, **Smart Graphs**, **Satellite Graphs**, **Enterprise Graphs**, and **Knowledge Graphs**.
![Graphs List](../../../images/Graph_VisualizerList_All_Graphs.png)

### B. Select and Load a Graph
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AFAICT, it doesn't necessarily show you the graph by default? For example, if I use the clear canvas option and re-open the graph visualizer, I only see the message that I need to use the Explore button to search for a node. It's important we cover the possible situations the user might find themselves in and describe all the options for selecting what is displayed to get out of nothing being displayed or displaying something specific.

Copy link

cla-bot bot commented May 28, 2025

Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: bluepal-shiva-darapaneni.
This is most likely caused by a git client misconfiguration; please make sure to:

  1. check if your git client is configured with an email to sign commits git config --list | grep email
  2. If not, set it up using git config --global user.email email@example.com
  3. Make sure that the git commit email is configured in your GitHub account settings, see https://github.com/settings/emails

Copy link

cla-bot bot commented May 28, 2025

Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: bluepal-shiva-darapaneni.
This is most likely caused by a git client misconfiguration; please make sure to:

  1. check if your git client is configured with an email to sign commits git config --list | grep email
  2. If not, set it up using git config --global user.email email@example.com
  3. Make sure that the git commit email is configured in your GitHub account settings, see https://github.com/settings/emails

Copy link

cla-bot bot commented May 28, 2025

Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: bluepal-shiva-darapaneni.
This is most likely caused by a git client misconfiguration; please make sure to:

  1. check if your git client is configured with an email to sign commits git config --list | grep email
  2. If not, set it up using git config --global user.email email@example.com
  3. Make sure that the git commit email is configured in your GitHub account settings, see https://github.com/settings/emails

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants